<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel - AI French Teacher</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/french-theme.css') }}">
    <style>
        .user-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        .user-table th {
            background: var(--primary-color);
            color: white;
            padding: 12px;
            text-align: left;
            font-weight: 600;
        }
        .user-table td {
            padding: 12px;
            border-bottom: 1px solid var(--border-color);
        }
        .user-table tr:hover {
            background: var(--bg-color);
        }
        .badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
        .badge-admin {
            background: #667EEA;
            color: white;
        }
        .badge-user {
            background: #50C878;
            color: white;
        }
        .badge-active {
            background: #50C878;
            color: white;
        }
        .badge-frozen {
            background: #E74C3C;
            color: white;
        }
        .progress-bar {
            width: 100%;
            height: 20px;
            background: #E0E0E0;
            border-radius: 10px;
            overflow: hidden;
            margin-top: 5px;
        }
        .progress-fill {
            height: 100%;
            background: linear-gradient(135deg, #4A90E2, #357ABD);
            transition: width 0.3s;
        }
        .progress-fill.warning {
            background: linear-gradient(135deg, #F39C12, #E67E22);
        }
        .progress-fill.danger {
            background: linear-gradient(135deg, #E74C3C, #C0392B);
        }
        .action-btn {
            padding: 6px 12px;
            margin: 0 3px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            transition: all 0.3s;
        }
        .btn-set {
            background: #4A90E2;
            color: white;
        }
        .btn-freeze {
            background: #F39C12;
            color: white;
        }
        .btn-unfreeze {
            background: #50C878;
            color: white;
        }
        .btn-delete {
            background: #E74C3C;
            color: white;
        }
        .btn-reset {
            background: #9B59B6;
            color: white;
        }
        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }
        .token-info {
            font-size: 12px;
            color: var(--text-light);
        }
    </style>
</head>
<body>
    <div class="container">

        <header>
            <div class="site-logo">
                <span class="eiffel-tower">🗼</span>
                <h1 class="app-title">AI French Teacher</h1>
            </div>
            <div class="french-flag-bar"></div>
            <nav>
                <a href="/">🎤 录音翻译</a>
                <a href="/vocabulary">📚 单词本</a>
                <a href="/history">📜 历史记录</a>
                <a href="/admin" class="active">🔐 管理面板</a>
                <a href="#" onclick="handleLogout()" style="color: #EF4135;">🚪 登出</a>
            </nav>
            <div style="text-align: right; font-size: 14px; color: #666; margin-top: 10px;">
                👤 {{ user.username if user else '未登录' }} (👑 管理员)
            </div>
        </header>


        <main>
            <h2>👥 用户管理</h2>


            <div id="usersList">
                <p class="text-center">加载中...</p>
            </div>
        </main>


        <footer>
            <p>AI French Teacher v3.0 | 2025</p>
            <p style="margin-top: 10px;">
                <a href="/credits" style="color: var(--french-blue); text-decoration: none; font-weight: 600;">
                    ⚜️ 致谢 / Remerciements
                </a>
            </p>
        </footer>
    </div>


    <div id="tokenModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>设置Token限制</h2>
                <span class="close" onclick="closeTokenModal()">&times;</span>
            </div>
            <div class="modal-body">
                <p id="tokenUsername" style="margin-bottom: 20px; font-weight: 600;"></p>
                <form id="tokenForm">
                    <input type="hidden" id="tokenUserId">

                    <div class="form-group">
                        <label for="xunfeiLimit">讯飞API字符数限制：</label>
                        <input type="number" id="xunfeiLimit" min="0" step="100" required>
                    </div>

                    <div class="form-group">
                        <label for="qwenLimit">通义千问Token限制：</label>
                        <input type="number" id="qwenLimit" min="0" step="100" required>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn-primary">保存</button>
                        <button type="button" class="btn-secondary" onclick="closeTokenModal()">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/admin.js') }}"></script>
</body>
</html>

